<template>
  <view class="code" :style="theme">
    <view class="code_box">
      <view class="code_box_left"></view>
      <view class="code_box_right"></view>
      <view class="code_box_title">
        <text>{{ venName }}</text>
        <text>二维码对准闸机扫描口刷码进入</text>
      </view>
      <view class="code_box_x"></view>
      <view class="title_name">
        <text>{{ name }}</text>
        <text>使用时间：{{ time }}</text>
      </view>
      <view class="code_box_code">
        <canvas
          canvas-id="qrcode"
          style="width: 150px; height: 150px; margin: 0 auto"
        />
      </view>
    </view>
    <view class="code_text">
      <text>温馨提示：</text>
      <text>1、二维码有效期为1分钟</text>
      <text>2、距离扫描口10公分为最佳识别高度</text>
      <text>3、若扫码无法进入场馆，请联系现场工作人员</text>
    </view>
  </view>
</template>

<script>
import uQRCode from "@/common/uqrcode.js";
export default {
  data() {
    return {
      code: "",
      venName: "",
      name: "",
      time: "",
      //   url: "",
    };
  },
  onLoad(ops) {
    console.log(ops, "入参======");
    this.code = ops.code;
    this.venName = ops.venName || this.venueName;
    this.name = ops.name;
    this.time = ops.time;
    this.qrFun(ops.code);
  },
  methods: {
    jump(url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2(url, params, a) {
      this.$app.jump2(url, params, a);
    },
    qrFun: function (text) {
      uni.showLoading({ title: "加载中..." });
      uQRCode.make({
        canvasId: "qrcode",
        componentInstance: this,
        text: text,
        size: 150,
        margin: 0,
        backgroundColor: "#ffffff",
        foregroundColor: "#000000",
        fileType: "jpg",
        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
        success: (res) => {
          uni.hideLoading();
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.title_name {
  display: flex;
  justify-content: center;
  margin-bottom: 50rpx;
  margin-top: 40rpx;
  flex-direction: column;
  align-items: center;
  text:nth-child(1) {
    font-weight: 500;
    font-size: 32rpx;
    color: #222222;
    text-align: center;
  }
  text:nth-child(2) {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    margin-top: 16rpx;
    text-align: center;
  }
}
.code {
  overflow: hidden;
  height: 100vh;
  background: $color;
}
.code_box {
  position: relative;
  width: calc(100% - 80rpx);
  padding: 40rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 15rpx;
  margin-left: 40rpx;
  margin-top: 80rpx;
}

.code_box_left {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 175rpx;
  left: -20rpx;
  border-radius: 50%;
  background: $color;
}

.code_box_right {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 175rpx;
  right: -20rpx;
  border-radius: 50%;
  background: $color;
}

.code_box_title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.code_box_title text:nth-child(1) {
  font-size: 36rpx;
  font-weight: bold;
  color: #222222;
}

.code_box_title text:nth-child(2) {
  font-size: 24rpx;
  font-weight: 400;
  color: $color;
  margin-top: 14rpx;
}

.code_box_x {
  height: 1rpx;
  background: #e5e5e5;
  margin: 60rpx 0;
}

.code_box_code {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.code_box_refresh {
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
}

.code_box_refresh_btn {
  width: 260rpx;
  height: 80rpx;
  background: $moreColor;
  border-radius: 46rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code_text {
  margin-top: 48rpx;
  width: calc(100% - 80rpx);
  box-sizing: border-box;
  margin-left: 40rpx;
  display: flex;
  flex-direction: column;
}

.code_text text {
  font-size: 30rpx;
  font-weight: 400;
  margin-top: 15rpx;
  color: rgba(255, 255, 255, 0.9);
}

.code_text text:nth-child(1) {
  font-weight: 600;
  margin-top: 0;
}

.code_text text:nth-child(2) {
  margin-top: 15rpx;
}

.canvas {
  position: fixed;
  top: -100%;
  left: 0;
}
</style>
